<template>
  <div class="top-bar">
    <div class="container">
      <div class="col-5">
        <!-- 折叠框 -->
        <zdk title="桂林" location>
          <h1 style="color: #f00">hello world hello world hello world hello world</h1>
          <h1 style="color: #f00">hello world</h1>
          <h1 style="color: #f00">hello world</h1>
          <h3>hello world</h3>
        </zdk>
      </div>
      <div class="col-7">
        <ul class="top-bar-menu">
          <li>你好， XXX</li>
          <li class="top-bar-line"></li>
          <li>
            <zdk title="我的京东" arrow>xzxczxczxcxzcxzxczxczxcxzc</zdk>
          </li>
          <li class="top-bar-line"></li>
          <li>
            <zdk title="我的京东" arrow>xzxczxczxcxzc</zdk>
          </li>
          <li class="top-bar-line"></li>
          <li>你好</li>
          <li class="top-bar-line"></li>
          <li>你好</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import zdk from "~/components/zdk";

export default {
  components: {
    zdk
  }
};
</script>

<style lang="scss">
.top-bar {
  height: 35px;
  background: #e3e4e5;
  &-menu {
    float: right;
    li {
      float: left;
      height: 35px;
      line-height: 35px;
    }
  }
  &-line {
    margin: 0 10px;
    margin-top: 12px;
    width: 1px;
    height: 0.9em !important;
    background: #ccc;
  }
}
</style>